<%--
  Created by IntelliJ IDEA.
  User: 未来可期
  Date: 2022/12/17
  Time: 20:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>疆心优选</title>
    <link rel="stylesheet" type="text/css" href="/css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="/css/demo.css" />
    <link rel="stylesheet" type="text/css" href="/css/component.css" />
</head>
<body>
<div class="container demo-1">
  <div class="content">
    <div id="large-header" class="large-header">
      <canvas id="demo-canvas"></canvas>
      <h1 class="main-title"> <span class="thin">加入疆心优选</span>
      </h1>
    </div>
    <div class="page2">
      <ul style="list-style:none;">
        <li id="li1">
          <p>疆心优选致力促进城乡结合发展，走好乡村物流的最后一公里，同时促进农村地区经济的发展，为乡村与城市间搭一座更便捷的桥梁。疆心优选有速度，更有温度，欢迎大家入驻疆心优选，来创造无限的可能。
          </p><br>
        </li>
        <li id="li2">
          <p>合作商铺</p>
          <a class="counter" data-target="1220">0</a>
        </li>
        <li id="li3">
          <p>成交量</p>
          <a class="counter" data-target="100000">0</a>
        </li>
      </ul>
    </div>
    <div class="codrops-header">
      <h1>我们的优势</h1>
      <ul style="list-style:none;" class="page3">
        <li id="li1">
          <div class="avatar_box">
            <img src="/img/trader1.png" id="img1">
          </div>
          <p class="p1">质量保证</p>
          <p class="p2">
            平台严格审核产品的质量
          </p>
        </li>
        <li id="li2">
          <div class="avatar_box">
            <img src="/img/trader4 .png" id="img2">
          </div>
          <p class="p1">投入低</p>
          <p class="p2">
            只需投入较少成本，即可加入平台
          </p>
        </li>
        <li id="li3">
          <div class="avatar_box">
            <img src="/img/trader2.png" id="img3">
          </div>
          <p class="p1">模式创新</p>
          <p class="p2">
            采用智能化分拣技术，打造自动化仓库
          </p>
        </li>
        <li id="li1">
          <div class="avatar_box">
            <img src="/img/trader5.jpg" id="img4">
          </div>
          <p class="p1">快如闪电</p>
          <p class="p2">
            各个村设置了物流站点，提高快递效率
          </p>
        </li>
        <li id="li2">
          <div class="avatar_box">
            <img src="/img/trader7.png" id="img5">
          </div>
          <p class="p1">精心打造</p>
          <p class="p2">
            便捷的操作，适合绝大多数人
          </p>
        </li>
        <li id="li3">
          <div class="avatar_box">
            <img src="/img/trader6.png" id="img6">
          </div>
          <p class="p1">流转高效</p>
          <p class="p2">
            客户收到商品，平台立即打款
          </p>
        </li>
      </ul>
    </div>
    <div id="page4">
      <p id="welcome">欢迎入驻</p>
      <div id="page4-1">
        <p>我是供应商，我要供货</p>
      </div>
      <div id="page4-2">
        <p>疆心优选平台采取从农村到城市，从城市到农村双向流通的货物流通方式，物流更迅速。而且采用智能化分拣技术，打造自动化仓库，按照物品种类及目的地的不同进行智能分类。商家入驻享受金融、物流等服务。便捷的操作，为您创造无限的可能。
        </p>
      </div>
      <a href="#">点击入驻></a>
    </div>
  </div>

  <!-- <p class="ref">Image credits: <a href="http://www.eso.org/public/images/eso1205a/">ESO/VISTA/J. Emerson.
          Acknowledgment: Cambridge Astronomical Survey Unit</a></p> -->
</div><!-- /container -->
</body>
</html>
<script>

  (function () {

    function getTop(clsName) {
      var obj = document.getElementsByClassName(clsName)[0];
      return obj.getBoundingClientRect().top;
    }
    window.addEventListener('scroll', function () {
      var scrollT = document.documentElement.scrollTop || document.body.scrollTop;

      /*第二页动画的触发*/
      if (getTop('page2') < 330 && getTop('page2') > 300) {
        counters.forEach(counter => {
          const target = counter.getAttribute('data-target');
          let i = 0;
          const timer = setInterval(() => {
            const increment = parseInt(target / 50);
            i += increment;
            counter.textContent = i;
            if (i >= Number(target)) {
              clearInterval(timer);
            }
          }, 30);
        })

      }
    })
    const counters = document.querySelectorAll('.counter');

    var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;

    // Main
    initHeader();
    initAnimation();
    addListeners();

    function initHeader() {
      width = window.innerWidth;
      height = window.innerHeight;
      target = { x: width / 2, y: height / 2 };

      largeHeader = document.getElementById('large-header');
      largeHeader.style.height = height + 'px';

      canvas = document.getElementById('demo-canvas');
      canvas.width = width;
      canvas.height = height;
      ctx = canvas.getContext('2d');

      // create points
      points = [];
      for (var x = 0; x < width; x = x + width / 20) {
        for (var y = 0; y < height; y = y + height / 20) {
          var px = x + Math.random() * width / 20;
          var py = y + Math.random() * height / 20;
          var p = { x: px, originX: px, y: py, originY: py };
          points.push(p);
        }
      }

      // for each point find the 5 closest points
      for (var i = 0; i < points.length; i++) {
        var closest = [];
        var p1 = points[i];
        for (var j = 0; j < points.length; j++) {
          var p2 = points[j]
          if (!(p1 == p2)) {
            var placed = false;
            for (var k = 0; k < 5; k++) {
              if (!placed) {
                if (closest[k] == undefined) {
                  closest[k] = p2;
                  placed = true;
                }
              }
            }

            for (var k = 0; k < 5; k++) {
              if (!placed) {
                if (getDistance(p1, p2) < getDistance(p1, closest[k])) {
                  closest[k] = p2;
                  placed = true;
                }
              }
            }
          }
        }
        p1.closest = closest;
      }

      // assign a circle to each point
      for (var i in points) {
        var c = new Circle(points[i], 2 + Math.random() * 2, 'rgba(255,255,255,0.3)');
        points[i].circle = c;
      }
    }

    // Event handling
    function addListeners() {
      if (!('ontouchstart' in window)) {
        window.addEventListener('mousemove', mouseMove);
      }
      window.addEventListener('scroll', scrollCheck);
      window.addEventListener('resize', resize);
    }

    function mouseMove(e) {
      var posx = posy = 0;
      if (e.pageX || e.pageY) {
        posx = e.pageX;
        posy = e.pageY;
      }
      else if (e.clientX || e.clientY) {
        posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
      }
      target.x = posx;
      target.y = posy;
    }

    function scrollCheck() {
      if (document.body.scrollTop > height) animateHeader = false;
      else animateHeader = true;
    }

    function resize() {
      width = window.innerWidth;
      height = window.innerHeight;
      largeHeader.style.height = height + 'px';
      canvas.width = width;
      canvas.height = height;
    }

    // animation
    function initAnimation() {
      animate();
      for (var i in points) {
        shiftPoint(points[i]);
      }
    }

    function animate() {
      if (animateHeader) {
        ctx.clearRect(0, 0, width, height);
        for (var i in points) {
          // detect points in range
          if (Math.abs(getDistance(target, points[i])) < 4000) {
            points[i].active = 0.3;
            points[i].circle.active = 0.6;
          } else if (Math.abs(getDistance(target, points[i])) < 20000) {
            points[i].active = 0.1;
            points[i].circle.active = 0.3;
          } else if (Math.abs(getDistance(target, points[i])) < 40000) {
            points[i].active = 0.02;
            points[i].circle.active = 0.1;
          } else {
            points[i].active = 0;
            points[i].circle.active = 0;
          }

          drawLines(points[i]);
          points[i].circle.draw();
        }
      }
      requestAnimationFrame(animate);
    }

    function shiftPoint(p) {
      TweenLite.to(p, 1 + 1 * Math.random(), {
        x: p.originX - 50 + Math.random() * 100,
        y: p.originY - 50 + Math.random() * 100, ease: Circ.easeInOut,
        onComplete: function () {
          shiftPoint(p);
        }
      });
    }

    // Canvas manipulation
    function drawLines(p) {
      if (!p.active) return;
      for (var i in p.closest) {
        ctx.beginPath();
        ctx.moveTo(p.x, p.y);
        ctx.lineTo(p.closest[i].x, p.closest[i].y);
        ctx.strokeStyle = 'rgba(156,217,249,' + p.active + ')';
        ctx.stroke();
      }
    }

    function Circle(pos, rad, color) {
      var _this = this;

      // constructor
      (function () {
        _this.pos = pos || null;
        _this.radius = rad || null;
        _this.color = color || null;
      })();

      this.draw = function () {
        if (!_this.active) return;
        ctx.beginPath();
        ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
        ctx.fillStyle = 'rgba(156,217,249,' + _this.active + ')';
        ctx.fill();
      };
    }

    // Util
    function getDistance(p1, p2) {
      return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
    }

  })();
</script>
